<template>
  <div class="comment">
    <!-- {{ fileId }} -->
    <div class="doc">
      <!-- <img :src="imgPath" alt=""> -->
      <!-- <span>{{ commentItem.filename }}</span> -->
    </div>
    <div class="title">
      <span>评论</span>
      <span>59</span>
    </div>
    <div class="input">
      <img src="@/assets/comment.avif" alt="">
      <input type="text" placeholder="宫廷玉液酒，评论走一走" v-model="content">
      <button @click="addMainComment">发布</button>
    </div>
    <div class="content" v-for="item in commentList" :key="commentList.id">
      <div class="author">
        <img :src="item.avatar" alt="">
        <span class="name">{{ item.username }}</span>
        <!-- <span class="idtify">up</span> -->
      </div>
      <div class="comment-text">
        <div class="text">
          {{ item.content }}
        </div>
        <div class="date-reply">
          <span class="date">{{ item.createTime }}</span>
          <span class="reply" @click="toReply(item)">回复</span>
        </div>
        <div class="son-comment" v-for="i in item.commentUserList" :key="i.id">
          <div class="head">
            <img :src="i.avatar" alt="">
            <span class="name">{{ i.username }}</span>
            <span class="son-text">{{ i.content }}</span>
          </div>
          <div class="date-reply">
            <span class="son-date">{{ i.createTime }}</span>
            <span class="reply" @click="replyName(item,i)">回复</span>
          </div>
          <div class="reply-comment" v-for="j in i.commentUserList" :key="j.id">
            <img :src="j.avatar" alt="">
            <span class="name">{{ j.username }}</span>
            <span>回复 </span>
            <span>@{{j.pusername}}:</span>
            <span>{{ j.content }}</span>
            <div class="date-reply">
              <span class="son-date">{{ j.createTime }}</span>
              <span class="reply" @click="replyName(item,j)">回复</span>
            </div>
          </div>
        </div>
        <div class="more">共5条回复, 点击查看</div>
     
        <div class="reply-box" v-if="item.replyBox">
          <div class="input">
            <img src="@/assets/comment.avif" alt="">
            <input type="text" :placeholder="replyPlaceholder" style="width:330px;" v-model="item.replyText">
            <button @click="sendText(item)">发布</button>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>


export default {
  name: 'commentVue',
  data() {

    return {
      // 路由跳转的文件id
      fileId: 0,
      // 评论的文本内容
      content: '',
      // 文件的评论列表
      commentList: [],
      // 回复框的值
      replyPlaceholder:"",
      // 回复的id
      replyId:0,
      
    }
  },
  computed: {
    // imgPath(){
    //   // const fileType = this.commentItem.fileType
    //   const fileNames=['','video','mp3','img','pdf','word','excel','txt','code','zip','ppt','folder'];
    //   const imgName = fileNames[fileType];
    //   return require(`@/common/image/${imgName}.png`)
    // }
  },
  methods: {
    toReply(item) {
      this.commentList.forEach(i=>{
        i.replyBox=false
      })
      this.replyId=0
      item.replyBox=true
      this.replyPlaceholder = '回复 @'+item.username
    },
    replyName(item,val){
      this.commentList.forEach(i=>{
        i.replyBox=false
      })
      item.replyBox=true
      this.replyId=val.id
      this.replyPlaceholder = '回复 @' + val.username
    },
    sendText(item) {
      // console.log(item.id)
      // console.log(item.replyText)
      if(this.replyId==0){
        this.postReply(item.id,item.replyText)
      }else {
        this.postReply(this.replyId,item.replyText)
      }
      item.replyBox = false
      this.getCommentList(item.fileId)

    },
    addMainComment() {
      if (this.content.length == 0) {
        this.$message.error("你还没有输入内容！")
      } else {
        this.postComment(this.fileId, this.content)
      }
    },
    // 添加评论
    async postComment(fileId, content) {
      let res = await this.$store.dispatch("postComment", {
        fileId: fileId,
        content: content
      })
      // console.log(res)
      if (res.success) {
        this.$message.success("评论成功！")
        this.content = ''
      } else {
        this.$message.info("评论失败！")
      }
      this.getCommentList(this.fileId)
    },

    // 获取评论列表
    async getCommentList(fileId) {
      let res = await this.$store.dispatch("getCommentList", fileId)
      if (!res.success) {
        this.$message.info("获取评论失败！")
      }
      console.log(res.data)
      res.data.forEach(item => {
        item.replyBox = false
        item.replyText=''
      });
      this.commentList = res.data
      // console.log(this.commentList)
    },
    // 添加回复
    async postReply(pId,content){
      // console.log(content)
      let res = await this.$store.dispatch("postReply",{
        pId:pId,
        content:content
      })
      if(res.success){
        this.$message.success("回复成功！")
      }else {
        this.$message.error("回复失败!")
      }
    }
  },
  created() {
    this.fileId = this.$route.query.fileId

  },
  mounted() {
    this.getCommentList(this.fileId)
  }
}
</script>

<style  scoped>
.comment {
  /* background: #ccc; */
  margin: 20px 30px;
}

.doc img {
  width: 40px;
  vertical-align: middle;
}

.doc span {
  vertical-align: middle;
}

.title {
  margin-top: 20px;
}

.title span:nth-child(1) {
  font-size: 20px;
  vertical-align: middle;

}

.title span:nth-child(2) {
  font-size: 14px;
  padding: 10px;
  color: #9499A0;
  vertical-align: middle;
}

.input {
  margin: 20px 15px;
}

.input img {
  width: 40px;
  height: 40px;
  vertical-align: middle;
  margin-right: 20px;
}

.input input,
button {
  border: 1px solid #fff;
  background: rgb(241, 242, 243);
  border-radius: 5px;
  font-size: 13px;
  color: #9499A0;
  font-weight: 500;
  vertical-align: middle;
}

.input input:hover,
input:focus {
  border: 1px solid #ccc;
  background: #fff;
  outline: none;
}

.input input {
  width: 400px;
  padding: 15px 10px;
}

.input button {
  background: rgb(127, 214, 245);
  color: #fff;
  font-size: 14px;
  margin-left: 10px;
  padding: 12px 20px;
}

.input button:hover {
  background: rgb(0, 174, 236);
}

.content {
  margin-left: 15px;
  margin-top: 30px;
}

.author img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  vertical-align: middle;
  object-fit: cover;
  /* 图片按比例缩放并裁剪以填满容器 */
  object-position: center;
  /* 图片在容器中居中显示 */
}

.name {
  color: #61666d;
  margin: 0px 15px;
  font-size: 14px;
  vertical-align: middle;
}

.idtify {
  background: rgb(255, 102, 153);
  color: #fff;
  padding: 2px;
  font-size: 13px;
  font-weight: 500;
  display: inline-block;
  height: 10px;
  line-height: 6px;
  border-radius: 3px;
}

.comment-text {
  margin-left: 55px;
}

.text {
  margin-top: 5px;
  color: #18191C;
}

.date-reply {
  color: #9499A0;
  margin-top: 5px;
  font-size: 14px;
}

.son-date {
  margin-left: 40px;
}

.reply {
  margin-left: 15px;

}

.reply:hover {
  color: rgb(0, 174, 236);
  cursor: pointer;
}

.son-comment {
  margin-top: 10px;
}

.reply-comment {
  margin-top: 10px;
}

.head img,
.reply-comment img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  vertical-align: middle;
}

.son-text {
  vertical-align: middle;
}

.reply-comment span:nth-child(4) {
  color: #008AC5;
  cursor: pointer;
}

.more {
  color: #61666d;
  font-size: 14px;
  margin-top: 10px;
  cursor: pointer;
}
</style>>

